import { Engine, SpriteManager, CubeTexture, Color3, MeshBuilder, FollowCamera, Camera, HemisphericLight, Vector3, Sprite, Scene, ArcRotateCamera, PointLight, StandardMaterial, Texture, ShaderMaterial, IAnimationKey, AssetsManager, MeshAssetTask, AbstractMesh, PickingInfo, Mesh, Animation, Material, SceneLoader, ActionManager, InterpolateValueAction, SetValueAction } from 'babylonjs'
import 'babylonjs-loaders';

// 文本
export class Sky {
  private dom: HTMLCanvasElement
  public engine: Engine
  private scene: Scene
  private camera: ArcRotateCamera
  private deg: any[]
  constructor(dom: HTMLCanvasElement) {
    this.dom = dom
    this.engine = new Engine(this.dom, true)  // 设置引擎
    this.scene = new Scene(this.engine)   // 创建场景
    // 纵轴旋转45°
    this.deg = [45, 45]
    this.camera = new ArcRotateCamera("Camera", Math.PI / 180 * this.deg[0], Math.PI / 180 * this.deg[1], 100, Vector3.Zero(), this.scene, true); // 创建相机
    this.camera.lowerRadiusLimit = 80;   // 缩放最小距离
    this.camera.upperRadiusLimit = 300; //限制相机距离焦点最远距离
    this.camera.attachControl(this.dom, false)  // 添加控制
    let that = this
    // 天空盒

    // this.camera.lowerBetaLimit = null as unknown as number
    this.camera.upperBetaLimit = Math.PI / 180 * 89
    // this.camera.lowerAlphaLimit = null as unknown as number
    // this.camera.upperAlphaLimit = null as unknown as number
    // this.camera.lowerRadiusLimit = null as unknown as number
    // this.camera.upperRadiusLimit = null as unknown as number

    var light = new HemisphericLight("hemiLight", new Vector3(10, 1000, -1000), this.scene);
    const box = Mesh.CreateBox('', 20, this.scene)
    box.position.set(0, 10, 0)
    const m = new StandardMaterial('', this.scene)
    m.diffuseTexture = new Texture('/crate.png', this.scene)
    m.specularColor = new Color3(0.3, 0.3, 0.3);
    box.material = m

    const box2 = Mesh.CreateBox('', 20, this.scene)
    box2.material = m
    box2.position.set(0, 20 + 10, 0)
    const box3 = Mesh.CreateBox('', 20, this.scene)
    box3.material = m
    box3.position.set(20, 0 + 10, 0)
    const box4 = Mesh.CreateBox('', 20, this.scene)
    box4.material = m
    box4.position.set(0, 0 + 10, 20)

    Mesh.CreatePlane

    const ground = Mesh.CreateGround('', 500, 500, 200, this.scene)
    const m2 = new StandardMaterial('', this.scene)
    const tx = new Texture('/grass.jpg', this.scene)
    tx.uScale = 25;
    tx.vScale = 25
    m2.diffuseTexture = tx
    m2.specularColor = new Color3(0, 0, 0);
    ground.material = m2


    var skybox = MeshBuilder.CreateBox("skyBox", { size: 1000.0 }, this.scene);
    var skyboxMaterial = new StandardMaterial("skyBox", this.scene);
    skyboxMaterial.backFaceCulling = false;
    skyboxMaterial.reflectionTexture = new CubeTexture("https://www.babylonjs-playground.com/textures/TropicalSunnyDay", this.scene);
    skyboxMaterial.reflectionTexture.coordinatesMode = Texture.SKYBOX_MODE;
    skyboxMaterial.diffuseColor = new Color3(0, 0, 0);
    skyboxMaterial.specularColor = new Color3(0, 0, 0);
    skybox.material = skyboxMaterial;

    // const x = Mesh.CreateLines('x', [Vector3.Zero(), new Vector3(1000, 0, 0)], this.scene)
    // x.color = new Color3(1, 0, 0);
    // const y = Mesh.CreateLines('y', [Vector3.Zero(), new Vector3(0, 1000, 0)], this.scene)
    // y.color = new Color3(0, 1, 1);
    // const z = Mesh.CreateLines('z', [Vector3.Zero(), new Vector3(0, 0, 1000)], this.scene)
    // z.color = new Color3(1, 0, 1);
  }
  render() {
    // 引擎渲染场景
    this.engine.runRenderLoop(() => {

      this.deg[0] += 1
      this.scene.render()

    })
  }


}


